<template>
  <view class="form-container-box">
    <!-- 待用活动表单 -->

    <uni-popup ref="popup" type="dialog" class="popup">
      <uni-popup-dialog  message="成功消息" :duration="2000" placeholder="请输入密码" :before-close="true"
                        @close="close" @confirm="confirm">
        <input type="password" placeholder="请输入密码" v-model="formLogin.password">
      </uni-popup-dialog>
    </uni-popup>

    <view @click="toAddress">
      <list-view>
        <template #left>
          <view>取餐地址</view>
        </template>
        <template #right>
          <text>{{ currentAddress }}</text>
        </template>
      </list-view>
    </view>
    <active-form :formDate="formDate" @choose-image-btn="chooseImage" @delete-img-btn="deleteImg" @sure-btn="sure"
                 @input-val="inputVal">
    </active-form>

    <!-- (对必填项input框为空是提示的和错误两种不同提示) -->
    <view class="buttonBox" @click="open">
      提交
    </view>
    <!-- (对必填项input框为为空和错误是一种提示) -->
    <!-- <view class="buttonBox" @click="submit2">
      提交2
    </view> -->
    <!--    <cover-view class="submit-data">-->
    <!--      {{ submitData }}-->
    <!--    </cover-view>-->

    <view class="amount"> 合计:
      {{ formUpdate.amount }}
    </view>
    <view class="recommendDetails" v-if="dishList.length!==0">
      <view v-for="(item,index) in dishList" :key="item.id">
        <view class="shopDetails" @click="toDish(item)">
          <view class="left">
            <image :src="'/api/common/download?name='+item.image"></image>
          </view>
          <view class="right">
            <view class="rightTitleBox">
              <h1>{{ item.name }}</h1>
              <image src="../../static/home/recommends/ellipsis-v.png" class="ellipsis"></image>
            </view>
            <view class="rightFirstBox">
              <view class="rightFirstBoxRight">
                <text>X {{ item.number }}份</text>
              </view>
            </view>
            <view class="rightSecondBox">
              <text>价格￥{{ item.price }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
import activeForm from './../../components/active_form.vue';
import {addOrderApi, getAllCabinetApi, getCartApi, getUserAddressApi, loginApi, removeAllCarApi} from "@/network/api";
import {getAddress, getToken, getTokenId, setRole, setToken} from "@/common/auth";
import {getBusinessId, getNowTime, getOrders, getOrdersTotal, removeAll, toDish} from "@/common/common";

export default {
  data() {
    return {
      submitData: "",
      currentAddress: "",
      currentAddressId: "",

      dishList: [],
      formLogin: {
        password: '',
        username: getToken().username
      },
      formUpdate: {
        addressBookId: 0,//地址id
        businessId: getBusinessId(),//店家ID
        remark: "",//备注
        status: 1,//订单状态 1已付款，2已出餐待派送，3已接单，4已派送，5已完成，6已取消
        amount: 0,
        userId: getTokenId(),
        dishList: [],
        checkoutTime: getNowTime()
      },
      formDate: [
        // {
        //   placeholder: "请选择",
        //   label: "外卖柜子",
        //   type: "radio",
        //   selectVal: [{address: "小区门口外卖柜1", id: 1, state: "0"}],
        //   rules: {
        //     name: "cabinetid",//外卖柜id
        //     value: "",
        //     label: "address",//选项展示内容
        //     need: "id",//选项需求内容
        //     needValue: "",//选项需求内容返回
        //     verify: "req",
        //     errMess: "请选择收货地址"
        //   }
        // },
        // {
        //   placeholder: "姓名，2-20个汉字，中间允许包含一个“.”",
        //   label: "姓名",
        //   type: "text",
        //   rules: {
        //     name: "realName",
        //     value: "",
        //     verify: "req|realName",
        //     errMess: "姓名填写不正确",
        //   }
        // },
        // {
        //   placeholder: "请选择",
        //   label: "地址",
        //   type: "radio",
        //   selectVal: [{address: "小区门口外卖柜1", id: 1, state: "0"}],
        //   rules: {
        //     name: "cabinetid",//外卖柜id
        //     value: "",
        //     label: "address",//选项展示内容
        //     need: "id",//选项需求内容
        //     needValue: "",//选项需求内容返回
        //     verify: "req",
        //     errMess: "请选择收货地址"
        //   }
        // },
        // {
        //   placeholder: "请选择",
        //   label: "性别",
        //   type: "radio",
        //   selectVal: ["男", "女", "人妖"],
        //   rules: {
        //     name: "sex",
        //     value: "",
        //     verify: "",
        //     errMess: "请选择性别"
        //   }
        // },
        // {
        //   label: "身份证正面",
        //   type: "image",
        //   updateImg: false,//默认只显示上传按钮
        //   rules: {
        //     name: "idBefore",
        //     value: "",
        //     verify: "req",
        //     errMess: "请上传身份证正面"
        //   }
        // },
        // {
        //   label: "身份证反面",
        //   type: "image",
        //   updateImg: false,//默认只显示上传按钮
        //   rules: {
        //     name: "idAfter",
        //     value: "",
        //     verify: "req",
        //     errMess: "请上传身份证反面"
        //   }
        // },
        // {
        //   placeholder: "8-20个字符，至少1个大写字母，1个小写字母和1个数字",
        //   label: "密码",
        //   type: "password",
        //   rules: {
        //     name: "pwd",
        //     value: "",
        //     verify: "req|pwd",
        //     errMess: "密码格式不正确"
        //   }
        //
        // },
        // {
        //   placeholder: "8-20个字符，至少1个大写字母，1个小写字母和1个数字",
        //   label: "确认密码",
        //   type: "password",
        //   rules: {
        //     name: "qpwd",
        //     value: "",
        //     verify: "req|same",
        //     errMess: "两次密码不一致"
        //   }
        //
        // },
        // {
        //   placeholder: "请输入11位手机号",
        //   label: "手机号",
        //   type: "number",
        //   rules: {
        //     name: "phone",
        //     value: "",
        //     id: "",
        //     verify: "req|phone",
        //     errMess: "手机号填写不正确"
        //   }
        // },
        // {
        //   placeholder: "请输入6位数的验证码",
        //   label: "验证码",
        //   type: "number",
        //   rules: {
        //     name: "yzm",
        //     value: "",
        //     verify: "req|num6",
        //     errMess: "验证码填写不正确"
        //   }
        // },
        // {
        //   placeholder: "请输入QQ",
        //   label: "QQ",
        //   type: "number",
        //   rules: {
        //     name: "qq",
        //     value: "",
        //     verify: "qq",
        //     errMess: "qq号输入不正确"
        //   }
        //
        // },
        {
          placeholder: "备注喜好",
          label: "备注",
          type: "textarea",
          rules: {
            name: "remark",
            value: "",
            verify: "",
            errMess: "请输入自我介绍"
          }
        },
      ]
    }
  },
  components: {
    activeForm
  },
  onShow() {
    this.formUpdate.amount = getOrdersTotal()
    if (getAddress() !== null) {
      this.currentAddress = getAddress().provinceName
      this.formUpdate.addressBookId = getAddress().id
    }

    // this.getAllLocation()
    // this.getUserAddress()
    this.dishList = getOrders()
    this.formUpdate.dishList = JSON.stringify(getOrders())
    console.log(getOrdersTotal())
    // const _this = this
    // getCartApi().then(res => {
    //   _this.dishList = res.data
    //   _this.formUpdate.dishList = res.data
    // })
  },
  methods: {
    toDish,
    toAddress() {
      uni.navigateTo({
        url: '/pages/address/address'
      })
    },
    submit1: function () {
      // 表单验证 可选项 otherPra:otherPra
      var otherPra = {
        reqEmptyVal: true,
      }
      if (this.$vervify({
        formDate: this.formDate,
        otherPra: otherPra
      })) {
        uni.showToast({
          title: "验证通过",
          duration: 2000,
          icon: "none"
        });
        // 表单序列化
        this.submitData = this.$submitForm(this.formDate)
        console.log(this.submitData)
        const _this = this
        Object.assign(_this.formUpdate, this.submitData)
        addOrderApi(_this.formUpdate).then(res => {
          console.log(res)
          if (res.code === 200) {
            uni.showToast({
              title: "提交成功",
              duration: 2000,
              icon: "none"
            });
            //removeAllCarApi()
            removeAll()
            uni.switchTab({
              url: '/pages/order/order'
            })
          }
        }).catch(err => {
          console.log(err)
        })

      }
    },

    open() {
      // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']

      this.$refs.popup.open()
    },
    close() {
      // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']

      this.$refs.popup.close()
    },
    confirm(value) {
      // 输入框的值
      console.log(value)
      // TODO 做一些其他的事情，手动执行 close 才会关闭对话框
      // ...
      loginApi(this.formLogin).then(res => {
        if (res.code===200){
          uni.showToast({
            title: "支付成功",
            icon: 'none'
          });
          this.submit1()
        }else {
          uni.showToast({
            title: "密码错误",
            icon: 'none'
          });
        }
      }).catch(err => {
        console.log(err)
      })
      this.$refs.popup.close()
    },
    submit2: function () {
      // 表单验证 非必传otherPra:otherPra
      if (this.$vervify({
        formDate: this.formDate
      })) {

        // 表单序列化
        this.submitData = "序列化数组：" + JSON.stringify(this.$submitForm(this.formDate))
        console.log(this.$submitForm(this.formDate))
      }
    },
    // 上传图片
    chooseImage: function (data) {
      var data = JSON.parse(data)
      this.formDate[data.index].rules.value = data.value;
      this.formDate[data.index].updateImg = true;
    },
    // 删除图片
    deleteImg: function (index) {
      this.formDate[index].rules.value = "";
      this.formDate[index].updateImg = false;
    },
    // 确定
    sure: function (data) {
      var data = JSON.parse(data);
      if (String(data.currentSelectIndex) !== "" && String(data.currentSelectValue) !== "") {
        this.formDate[data.currentSelectIndex].rules.value = data.currentSelectValue;
        this.formDate[data.currentSelectIndex].rules.needValue = data.currentSelectValueNeed;
      }
    },
    // inputVal
    inputVal: function (data) {
      var data = JSON.parse(data);
      if (String(data.val) !== "" && String(data.index) !== "") {
        this.formDate[data.index].rules.value = data.val;
      }
    },
    getAllLocation: function () {
      const _this = this
      getAllCabinetApi().then(res => {
        _this.formDate[0].selectVal = res.data
      })
    }, getUserAddress: function () {
      const _this = this
      getUserAddressApi().then(res => {
        _this.formDate[1].selectVal = res.data
      })
    }
  }
}
</script>

<style lang="scss">
.form-container-box {
  width: 100vw;
  font-size: 28upx;
  min-height: 90vh;
  position: relative;
  padding-bottom: 100upx;
}

.bgfff {

}

.popup {
  border-radius: 50rpx;
  width: 100%;
  margin-bottom: 50rpx;
  z-index: 100;
}

.buttonBox {
  background-color: #FA877D;
  border-radius: 50rpx;
  width: 100%;
  height: 84upx;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;

  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99;
}

.submit-data {
  padding: 20upx;
  margin-top: 20upx;
  word-break: break-word;
}

.amount {
  padding: 0 20rpx 0 20rpx;
  color: red;
  font-size: 40rpx;
}

.recommendDetails {
  margin-bottom: 190rpx;

  .shopDetails {
    display: flex;
    box-sizing: content-box;
    padding: 10rpx 20rpx;

    .left {
      margin-right: 20rpx;

      image {
        width: 160rpx;
        height: 160rpx;
      }
    }

    .right {
      width: 76%;

      .rightTitleBox {
        display: flex;
        justify-content: space-between;

        .ellipsis {
          margin-top: 10rpx;
          width: 24rpx;
          height: 24rpx;
        }
      }


      .rightFirstBox {
        display: flex;
        justify-content: space-between;
        font-size: 24rpx;
        margin-top: 8rpx;
        color: #575757;

        .rightFirstBoxLeft {
          text:first-child {
            margin-right: 20rpx;
            color: #E36515;
          }
        }

        .rightFirstBoxRight {
          text:first-child {
            margin-right: 20rpx;
          }
        }
      }

      .rightSecondBox {
        display: flex;
        font-size: 28rpx;
        color: #575757;
        margin-top: 8rpx;
        margin-left: 228rpx;

        view {

          text:first-child {
            margin-left: 20rpx;
          }

          .oldPrice {
            color: #B1B1B1;
            font-size: 22rpx;
            text-decoration: line-through;
            margin-left: 4rpx;
          }
        }

      }

      .number-selector {
        display: flex;

        .rightThirdBox {

          margin-top: 6rpx;
          width: 270rpx;
          background-color: #FFEEE2;
          font-size: 22rpx;
          color: #D1651F;
          border-radius: 6rpx;
          text-align: center;
          padding: 4rpx;
        }

        .selector {
          padding-left: 24rpx;
        }
      }

      .rightFourth {
        height: 26rpx;
        overflow: hidden;
        padding-bottom: 40rpx;
        border-bottom: 1px solid #F6F6F6;
        display: flex;
        flex-wrap: wrap;

        font-size: 22rpx;
        color: #DE6050;

        .cutBox {
          border-radius: 8rpx;
          padding: 2rpx 6rpx;
          margin-right: 10rpx;
          margin-top: 10rpx;
          border: 1px solid #F7C7C1;
        }
      }

      h1 {
        font-size: 30rpx;
        font-weight: 700;
      }
    }
  }
}
</style>
